<template>
	<view class="pages" v-if="!this.roles.includes('driver')">
		<lb-tabbar v-model="activeName" :safeAreaHeight="true" @change="handleChange">
			<lb-tabbar-item v-for="item in tabbars" :key="item.name" :name="item.name" :icon="item.icon" :dot="item.dot" :info="item.info" icon-prefix="uniui">
				{{ item.text }}
			</lb-tabbar-item>
		</lb-tabbar>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	export default {
		name: "MyTabBar",
		props: {
			active: String,
		},
		data() {
			return {
				activeName:'',
				tabbars: []
			};
		},
		computed: {
			roles(){ // 用户角色
				return storage.get('vuex_roles');
			},
		},
		created() {
			console.log(this.active);
			this.activeName = this.active;
			this.getTabBars();
		},
		methods: {
			/**
			 * 获取导航
			 */
			getTabBars(){
				if(this.roles.includes('admin') || this.roles.includes('carAdmin')){ // 管理员或者约车管理员
					this.tabbars = [
						{name: 'home', text: '行程管理', icon: 'home'},
						{name: 'free', text: '内部拼车', icon: 'map-pin-ellipse'},
						{name: 'make', text: '内部约车', icon: 'location'},
						{name: 'vehicle', text: '车辆管理', icon: 'gear'},
						{name: 'driver', text: '司机管理', icon: 'person'},
					];
				}
				
				if(this.roles.includes('common')){ // 普通用户
					this.tabbars = [
						{name: 'home', text: '行程管理', icon: 'home'},
						{name: 'free', text: '内部拼车', icon: 'map-pin-ellipse'},
						{name: 'make', text: '内部约车', icon: 'location'}
					];
				}
			},
			/**
			 * 跳转连接
			 * @param {Object} e
			 */
			handleChange(e){
				switch(this.activeName){
					case 'home':
						this.$tab.navigateTo('/pages/index');
						break;	
					case 'free':
						this.$tab.navigateTo('/pages/free/index');
						break;
					case 'make':
						this.$tab.navigateTo('/pages/make/add');
						break;
					case 'vehicle':
						this.$tab.navigateTo('/pages/vehicle/index');
						break;
					case 'driver':
						this.$tab.navigateTo('/pages/driver/index');
						break;
				}
			}
		}
	}
</script>

<style lang="scss">

</style>